import DailyBill from "@/pages/Month/component/DayBill/index.jsx";
import {useSelector} from "react-redux";
import {useMemo} from "react";
import dayjs from "dayjs";
import _ from "lodash";
import {NavBar} from "antd-mobile";

const Year = () => {
    // 按年做数据分组
    const billList = useSelector(state => state.bill.billList)
    const yearGroup = useMemo(() => {
        const yearGroupData = _.groupBy(billList, (item) => dayjs(item.date).format('YYYY'))
        const keys = Object.keys(yearGroupData)
        return {
            yearGroupData,
            keys
        }
    }, [billList]);

    return (
        <div>
            <NavBar className="nav" backArrow={false}>
                年度账单
            </NavBar>
            <div style={{width: '100%', marginLeft: '10px', paddingRight: '10px'}}>
                {
                    yearGroup.keys.map(key => {
                        return <DailyBill key={key} date={key} billList={yearGroup.yearGroupData[key]} />
                    })
                }
            </div>
        </div>


    )
}

export default Year
